<template>
<div id="app">
   <!-- 公共头部组件 AppHeader.vue -->
    <app-header></app-header>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
               <!-- 侧边栏组件 AppSlider.vue -->
               <app-slider></app-slider>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <!-- 列表组件 AppList -->
                <!-- <app-list></app-list> -->
                <router-view>

                </router-view>

            </div>
        </div>
    </div>
</div>
</template>



<script>
// 1.引入
// 2. components选项:{组件名:对象名}}
// 3. 在template通过组件名使用组件
import AppHeader from './components/common/AppHeader'
import AppSlider from './components/common/AppSlider'
// import AppList from './AppList'

export default {
  name: 'app',
  components: {
    AppHeader: AppHeader,
    AppSlider: AppSlider
  },
  data() {
    return {}
  }
}
</script>

<style>
</style>

// .vue组件文件
// html css js
// 默认已经导出 export default
// App.vue根组件(所有组件都显示在这里, 路由router-link))
